JavaScript與ASP.NET圓舞曲之六: jQuery UI的Dialog中加點Button....

js忍之道 js原創

賽門 2012-07-20 12:25:56 ‧ 10587 瀏覽

分享至

從上一篇的討論, 我們可以看到jQuery UI提供更多的網頁應用, 例如Dialog.

但那個Dialog看起來少了點東西...比方說Button, 沒有Button的對話窗, 就好像有個門卻少了門把或門鎖一樣奇怪.

那...怎麼在iQuery UI的Dialog中加上Button呢?
我們再開個新的Web Form文件, 就命名為DialogButton.aspx...

然後把jquery-1.7.2.min.js及jquery-ui-1.8.21.custom.min.js、jquery-ui-1.8.21.custom.css引用到Web Form中...

再做點Coding工作, 整個DialogButton.aspx的程式碼如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DialogButton.aspx.cs" Inherits="WebTest.DialogButton" %>



<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
    <link href="Styles/css/smoothness/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />


    <form id="form1" runat="server">
        <div id="dlgButton" title="請按確定或取消..."> 
            請問您要按那個? 
        </div> 
 
        <script type="text/javascript">
            $(document).ready(function () {
                $("#dlgButton").dialog({
                    autoOpen: true,
                    modal: true,
                    buttons: {
                        "確定": function () {
                            alert("您按下確定!");
                            $(this).dialog("close");
                        },
                        "取消": function () {
                            alert("您按下取消!");
                            $(this).dialog("close");
                        }
                    }
                });
            });
        </script> 
    </form>

各位可以注意到我在Dialog中加入Button這個屬性, 而且, 可以同時指派多個Button, 執行的效果如下: